<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="keywords" content="admin, dashboard, bootstrap, template, flat, modern, theme, responsive, fluid, retina, backend, html5, css, css3">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="#" type="image/png">

    <title>员工页面</title>

    <!--icheck-->
    <link th:href="@{/js/iCheck/skins/minimal/minimal.css}" rel="stylesheet">
    <link th:href="@{/js/iCheck/skins/square/square.css}" rel="stylesheet">
    <link th:href="@{/js/iCheck/skins/square/red.css}" rel="stylesheet">
    <link th:href="@{/js/iCheck/skins/square/blue.css}" rel="stylesheet">

    <!--dashboard calendar-->
    <link th:href="@{/css/clndr.css}" rel="stylesheet">


    <!--common-->
    <link th:href="@{/css/style.css}" rel="stylesheet">
    <link th:href="@{/css/style-responsive.css}" rel="stylesheet">




    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
</head>

<body class="sticky-header">

<section>
    <!-- left side start-->
    <div th:replace="commons/commons::left-side"></div>
    <!-- left side end-->

    <!-- main content start-->
    <div class="main-content" >

        <!-- header section start-->
        <div th:replace="commons/commons::head"></div>
        <!-- header section end-->

        <h2><a class="btn btn-sm btn-primary" th:href="@{/user/goAddEmployee}">添加</a></h2>
        <table class="table table-striped table-sm">
            <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>邮箱</th>
                <th>部门</th>
                <th>入职日期</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="emp:${employees}">
                <td th:text="${emp.getId()}"></td>
                <td th:text="${emp.getLastName()}"></td>
                <td th:text="${emp.getGender()==0?'女':'男'}"></td>
                <td th:text="${emp.getEmail()}"></td>
                <td th:text="${emp.getDepartment().getDepartmenName()}"></td>
                <td th:text="${#dates.format(emp.getBirth(),'yyyy-MM-dd')}"></td>
                <td>
                    <a class="btn btn-sm btn-primary" th:href="@{/user/toEditPage/{id}(id=${emp.getId()})}">编辑</a>
                    <a class="btn btn-sm btn-danger" th:href="@{/user/del/{id}(id=${emp.getId()})}">删除</a>
                </td>


            </tr>
            </tbody>
        </table>

        <!--footer section start-->
        <footer>
            2014 &copy; AdminEx by ThemeBucket
        </footer>
        <!--footer section end-->


    </div>
    <!-- main content end-->
</section>

<!-- Placed js at the end of the document so the pages load faster -->
<script th:src="@{/js/jquery-1.10.2.min.js}"></script>
<script th:src="@{/js/jquery-ui-1.9.2.custom.min.js}"></script>
<script th:src="@{/js/jquery-migrate-1.2.1.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/modernizr.min.js}"></script>
<script th:src="@{/js/jquery.nicescroll.js}"></script>

<!--easy pie chart-->
<script th:src="@{/js/easypiechart/jquery.easypiechart.js}"></script>
<script thsrc="@{/js/easypiechart/easypiechart-init.js}"></script>

<!--Sparkline Chart-->
<script th:src="@{/js/sparkline/jquery.sparkline.js}"></script>
<script th:src="@{/js/sparkline/sparkline-init.js}"></script>
@{}
<!--icheck -->
<script th:src="@{/js/iCheck/jquery.icheck.js}"></script>
<script th:src="@{/js/icheck-init.js}"></script>

<!-- jQuery Flot Chart-->
<script th:src="@{/js/flot-chart/jquery.flot.js}"></script>
<script th:src="@{/js/flot-chart/jquery.flot.tooltip.js}"></script>
<script th:src="@{/js/flot-chart/jquery.flot.resize.js}"></script>
<script th:src="@{/js/flot-chart/jquery.flot.pie.resize.js}"></script>
<script th:src="@{/js/flot-chart/jquery.flot.selection.js}"></script>
<script th:src="@{/js/flot-chart/jquery.flot.stack.js}"></script>
<script th:src="@{/js/flot-chart/jquery.flot.time.js}"></script>
<script th:src="@{/js/main-chart.js}"></script>

<!--common scripts for all pages-->
<script th:src="@{/js/scripts.js}"></script>


</body>
</html>